<template>
  <div>
    <div>
      <ul class="flex justify-between">
        <li class="titItem" :key="index" v-for="(item, index) in titleList">{{ item.title }}</li>
      </ul>
    </div>
    <div class="warp">
      <vue3-seamless-scroll hover-stop="true" :list="listData" hover="true" step="0.1">
        <!-- <div v-for="(item, index) in listData" :key="index" class="item"
        style="padding: 10px; margin: 5px; font-size: 14px">
        <span v-for="(value, key, ind) in item" :key="ind" class="spanClass">
            {{ value }}
        </span>
    </div> -->
        <div>
          <ul class="infoIte flex justify-between" :key="index" v-for="(item, index) in listData">
            <li class="titItem">{{ item.title }}</li>
            <li class="titItem">{{ item.date }}</li>
            <li class="titItem">{{ item.date }}</li>
            <li class="titItem">{{ item.date }}</li>
            <li class="titItem">{{ item.date }}</li>
          </ul>
        </div>
      </vue3-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: 'Example01Basic',
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      listData: [
        {
          title: '公园1',
          num: '100',
          date: '2017-12-16'
        },
        {
          title: '公园1',
          date: '2017-12-16'
        },
        {
          title: '公园1',
          date: '2017-12-16'
        },
        {
          title: '公园1',
          date: '2017-12-16'
        },
        {
          title: '公园1',
          date: '2017-12-16'
        },
        {
          title: '公园1',
          date: '2017-12-16'
        },
        {
          title: '公园1',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第八行无缝滚动第八行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第九行无缝滚动第九行',
          date: '2017-12-16'
        }
      ],
      titleList: [
        {
          title: '公园排名'
        },
        {
          title: '公园名称'
        },
        {
          title: '总人流量'
        },
        {
          title: '保障人数'
        },
        {
          title: '巡逻队五'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.infoIte {
  .titItem {
    border: 1px solid skyblue;
  }
}

.titItem {
  border: 1px solid red;
  text-align: center;
  flex: 1;
  padding: 10px 0;
}

.warp {
  height: 270px;
  width: 100%;
  margin: 20px auto;
  overflow: hidden;
}
</style>
